<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="layer/layer.js"></script>
    <script src="jquery-cookie.js"></script>
    <script src="template-web.js"></script>
    <style>
    body{
        width:100%;
    }
        #question{
            width:100%;
        }
        #div{
            width:600px;
            border: 1px solid black;
            /*height: 50px;*/
            background-color: lightcyan;
            font-size: 20px;
            margin: 0px auto;
            margin-bottom: 20px;
        }
     
    </style>
</head>

<body>
    <!--header头部-->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">在线问答系统 </a>

            </div>
            <div  id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="nav-btns">
                    <!--<li><a href="#" data-toggle="modal" data-target="#regist">注册</a></li>
                    <li class="dropdown"><a href="#" data-toggle="modal" data-target="#login">登录</a></li>-->
                </ul>
            </div>

        </div>
    </nav>
    <main class="container">
          
    </main>

    <!-- Modal模态框 -->
    <div class="modal fade" id="regist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新用户注册</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="regist-f">
                        <div class="form-group">
                            <label for="account" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input name="account" class="form-control"id="account" placeholder="数字字母下划线组成" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input name="pwd" class="form-control" id="pwd" placeholder="6位以上密码"type="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="confirm" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-10">
                                <input type="Password" class="form-control" id="confirm" placeholder="6位以上密码" >
                            </div>
                        </div>
                       
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="regist-btn" type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>

<!--登录模态框-->
 <div class="modal fade" id="login" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户登录</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="login-f">
                        <div class="form-group">
                            <label for="l-account" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input name="account" class="form-control"id="l-account" placeholder="数字字母下划线组成" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Pwd" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input name="pwd" class="form-control" id="pwd" placeholder="6位以上密码"type="Password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="login-btn" type="button" class="btn btn-primary">登录</button>
                </div>
            </div>
        </div>
    </div>
<!--提问模态框-->
    <div class="modal fade" id="ask" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请输入您的问题</h4>
                </div>
                <div class="modal-body">
                  <textarea id="question" class="form-control"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="ask-btn" type="button" class="btn btn-primary">提问</button>
                </div>
            </div>
        </div>
    </div>
    <div id="ni"></div>
</body>
<script type="text/html"id="t1">

    {{each data q}}
     <div class="panel panel panel-info">
            <div class="panel-heading">
                <h4>{{q.txt}}</h4>
               {{q.user}}|{{q.ip}}|{{q.date}}
            </div>
            <div class="panel-body">
                {{if q.answers.length>0}}
                <ul class="list-group">
                    {{each q.answers a}}
                    <li class="list-group-item">
                        <p>{{a.txt}}</p>
                        {{a.user}}|{{a.ip}}|{{a.date}}
                    </li>
                   {{/each}}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                </ul>
                {{/if}}
                <!--把问题的id设置到button的属性上，当点击button的时候就可以触发绑定的事件-->
                <button qid = '{{q.id}}'class="answer-btn pull-right btn btn-info ">我要回答</button>
            </div>
        </div>
        {{/each}}

</script>

<script src="index.js">
</script>
</html>